import React, { useCallback } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { utils } from '@pier88health/p8h-common'
import Navigate from '@NAVIGATION/navigateManager'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { DECISION_THEME, DECISION_TYPE } from '@CONSTANTS/decision'
import style from './HomeDecision.module.scss'

function getDecisionTheme(id, isSurvey) {
  const hashIndex = isSurvey ? utils.hashCode(id) % 6 : 0
  return DECISION_THEME[hashIndex] || DECISION_THEME[0]
}

export default function HomeDecision({ data = {}, index, language }) {
  const {
    p8Id, Title, DecisionType, ParticipantNumber, JourneyNumber
  } = data
  const isSurvey = DecisionType === DECISION_TYPE.Survey
  const { homeCard, homeCardBackground } = getDecisionTheme(p8Id, isSurvey)
  const count = (isSurvey ? ParticipantNumber : JourneyNumber) || 0
  const title = Title?.[language]
  const onClick = useCallback(() => {
    Navigate.decisionFlowIndex({ dId: p8Id, type: DecisionType })
    Taro.tracker.trackEvent(Analytic_Type.tap_home_deci?.eventId, { decisionName: title })
  }, [DecisionType, p8Id, title])
  return (
    <View className={`${style.container} ${index === 0 ? style.firstCard : ''}`} onClick={onClick} style={{ background: homeCardBackground }}>
      <View className={style.content} style={{ backgroundImage: `url(${homeCard})` }}>
        <View className={style.titleContainer}>
          <Text className={style.title}>{title}</Text>
        </View>
        <View className={style.descContainer}>
          <Text className={style.desc}>{`${count}人已参与`}</Text>
        </View>
      </View>
    </View>
  )
}
